<template>
  <div>
    <a-modal title="销售出库单详情" :footer="false" :visible="visible" @before-open="open" @cancel="visible = false" :align-center="false" title-align="start" top="20px" width="900px" :mask-closable="false">
      <div>
        <div class="step-top">
          <a-timeline :style="{ marginRight: '40px' }" direction="horizontal">
            <a-timeline-item :label="$setTime(itemInfo.gmtSubmitWarehouse)" :dotColor="stepNum >= 1 ? '' : 'var(--color-fill-4)'"> 提交仓库 </a-timeline-item>
            <a-timeline-item :label="$setTime(itemInfo.gmtSubmitPicking)" :dotColor="stepNum >= 2 ? '' : 'var(--color-fill-4)'"> 提交拣货 </a-timeline-item>
            <a-timeline-item :label="$setTime(itemInfo.gmtCompletePicking)" :dotColor="stepNum >= 3 ? '' : 'var(--color-fill-4)'"> 完成拣货 </a-timeline-item>
            <a-timeline-item :label="$setTime(itemInfo.gmtCompleteOutboud)" :dotColor="stepNum >= 4 ? '' : 'var(--color-fill-4)'"> 确认出库 </a-timeline-item>
          </a-timeline>
        </div>

        <div class="title mt10">基础信息</div>
        <div>
          <a-row>
            <a-col :span="8">
              <div class="label-text">出库单号：</div>
              <div class="label-value">{{ itemInfo.outOrderNumber }}</div>
              <div class="ml10 flag">{{ filterStatus() }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">拣货员：</div>
              <div class="label-value">{{ itemInfo.pickerName }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">店铺：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.shopName') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">平台单号：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.platformOrderNumber') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">平台：</div>
              <div class="label-value">{{ itemInfo.platform ? itemInfo.platform : '--' }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">发货仓库：</div>
              <div class="label-value">{{ itemInfo.warehouseName }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">包裹号：</div>
              <div class="label-value">{{ itemInfo.packageNumber }}</div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8"></a-col>
          </a-row>
        </div>
        <div class="title mt10">收货人信息</div>
        <div>
          <a-row>
            <a-col :span="8">
              <div class="label-text">收货人：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.address.userName') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">收货国家：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.address.country') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">省州：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.address.stateOrRegion') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">城市：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.address.city') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">邮编：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.address.postalCode') }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">详细地址：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.address.address') }}</div>
            </a-col>
            <a-col :span="24">
              <div class="label-text">买家留言：</div>
              <div class="label-value">{{ $extract(itemInfo, 'order.buyerLeaveMessage') }}</div>
            </a-col>
            <a-col :span="24">
              <div class="label-text">订单备注：</div>
              <div class="label-value">{{ orderRemark(itemInfo.order || []) }}</div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8"></a-col>
          </a-row>
        </div>
        <div class="title mt10">物流信息</div>
        <div>
          <a-row>
            <a-col :span="8">
              <div class="label-text">物流商：</div>
              <div class="label-value">{{ itemInfo.expressProviderName ? itemInfo.expressProviderName : '--' }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">物流渠道：</div>
              <div class="label-value">{{ itemInfo.shippingMethodName ? itemInfo.shippingMethodName : '--' }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">承运商：</div>
              <div class="label-value">{{ itemInfo.carrier ? itemInfo.carrier : '--' }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">运单号：</div>
              <div class="label-value">{{ $extract(itemInfo, 'waybillNumber') || '--' }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">跟踪号：</div>
              <div class="label-value">{{ $extract(itemInfo, 'trackingNumber') || '--' }}</div>
            </a-col>
            <a-col :span="8">
              <div class="label-text">物流面单：</div>
              <div class="label-value">
                <div class="highlight" @click="print" style="cursor: pointer" v-if="itemInfo.labelUrl">打印面单</div>
                <div v-else>--</div>
              </div>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8"></a-col>
          </a-row>
        </div>
      </div>
      <a-tabs v-model:active-key="current">
        <a-tab-pane title="出库明细" key="1" class="mt10">
          <a-table size="mini" class="table-two-line" :data="dataList" :summary="summary" :pagination="false" :scroll="{ x: '100%', y: '350px' }">
            <template #columns>
              <a-table-column title="序号" :width="40" #cell="{ record, rowIndex }">
                {{ rowIndex + 1 }}
              </a-table-column>
              <a-table-column title="图片" :width="60" #cell="{ record, rowIndex }">
                <ImgPopover :src="getImage(record)">
                  <template #con>
                    <img width="40" height="40" :src="getImage(record)" />
                  </template>
                </ImgPopover>
              </a-table-column>
              <a-table-column title="SKU/类目" :width="120" #cell="{ record, rowIndex }">
                <div>
                  <TextHidden :rowsWidth="100">{{ record.productSku }}</TextHidden>
                </div>
                <div>
                  <TextHidden :rowsWidth="100">{{ record.productCategoryName }}</TextHidden>
                </div>
              </a-table-column>
              <a-table-column title="MSKU/ASIN" :width="120" #cell="{ record, rowIndex }">
                <div>
                  <TextHidden :rowsWidth="100">{{ record.msku }}</TextHidden>
                </div>
                <div>
                  <TextHidden :rowsWidth="100">{{ record.asin }}</TextHidden>
                </div>
              </a-table-column>
              <a-table-column title="销售员" :width="120" #cell="{ record, rowIndex }">
                {{ record.salerName ? record.salerName : '--' }}
              </a-table-column>
              <a-table-column title="包装" :width="120" #cell="{ record, rowIndex }">
                <div>--</div>
              </a-table-column>
              <a-table-column title="产品备注" :width="120" #cell="{ record, rowIndex }" data-index="remark">
                <TextHidden :rowsWidth="100">{{ record.remark }}</TextHidden>
              </a-table-column>
              <a-table-column title="发货数量" :width="80" #cell="{ record, rowIndex }" data-index="qtyShipped">
                {{ record.qtyShipped }}
              </a-table-column>
              <a-table-column title="单价" :width="80" #cell="{ record, rowIndex }">
                {{ record.amtInventoryUnit }}
              </a-table-column>
              <a-table-column title="货值" :width="80" #cell="{ record, rowIndex }" data-index="amtRes">
                {{ record.qtyShipped * record.amtInventoryUnit }}
              </a-table-column>
              <a-table-column title="包装数" :width="80" #cell="{ record, rowIndex }" data-index="qtyShipped1"> -- </a-table-column>
              <a-table-column title="包装单价" :width="80" #cell="{ record, rowIndex }">--</a-table-column>
              <a-table-column title="包装成本" :width="80" #cell="{ record, rowIndex }" data-index="qtyShipped2">--</a-table-column>
              <a-table-column title="物流费" :width="80" #cell="{ record, rowIndex }" data-index="qtyShipped3">--</a-table-column>
              <a-table-column title="其他费用" :width="80" #cell="{ record, rowIndex }" data-index="qtyShipped4">--</a-table-column>
              <a-table-column title="合计金额" :width="80" #cell="{ record, rowIndex }" data-index="qtyShipped5">--</a-table-column>
            </template>
            <template #summary-cell="{ column, record, rowIndex }">
              <div>{{ record[column.dataIndex] }}</div>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane title="操作日志" key="2">2</a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { getPackageById } from '@/api/order'
  export default defineComponent({
    props: ['id', 'getImage'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const data: any = reactive({
        loading: false,
        itemInfo: {},
        current: '1',
        dataList: [],
      })

      const stepNum = computed(() => {
        let num = 0
        switch (data.itemInfo.status) {
          case 'TO_HAND':
            num = 1
            break
          case 'IN_PICKING':
            num = 2
            break
          case 'TO_OUTBOUND':
            num = 3
            break
          case 'HAS_OUTBOUND':
            num = 4
            break
          default:
            num = 5
            break
        }
        return num
      })

      const open = () => {
        getDetail()
      }

      const getDetail = async () => {
        const res = await getPackageById({ id: props.id })
        data.itemInfo = res?.data || {}
        data.dataList = data.itemInfo.packageItemList
      }

      const filterStatus = () => {
        let text = ''
        switch (data.itemInfo.status) {
          case 'TO_HAND':
            text = '待处理'
            break
          case 'IN_PICKING':
            text = '拣货中'
            break
          case 'TO_OUTBOUND':
            text = '待出库'
            break
          case 'HAS_OUTBOUND':
            text = '已出库'
            break
          case 'HAS_SHIPPED':
            text = '已运出'
            break
          case 'ERROR_TRACK':
            text = '跟踪异常'
            break
          case 'HAS_DELIVERY':
            text = '已交付'
            break
        }
        return text
      }

      const orderRemark = (item: any) => {
        let list = item.remarkList || []
        if (list[0]) {
          return list[0].remark
        }
      }

      const print = () => {
        if (data.itemInfo.labelUrl) {
          window.open(data.itemInfo.labelUrl)
        }
      }

      const summary = () => {
        let obj = {
          qtyShipped: 0,
          amtRes: 0,
          qtyShipped1: 0,
          qtyShipped2: 0,
          qtyShipped3: 0,
          qtyShipped4: 0,
          qtyShipped5: 0,
        }

        data.dataList.forEach((e: any) => {
          obj.qtyShipped += e.qtyShipped
          obj.amtRes += e.qtyShipped * e.amtInventoryUnit
        })

        // obj.amtAvailable = data.summartData?.amtAvailable || 0
        // obj.amtLocked = data.summartData?.amtLocked || 0
        // obj.inventoryTotal = data.summartData?.inventoryTotal || 0
        // obj.inventoryValue = data.summartData?.inventoryValue || 0

        return [
          {
            remark: '合计',
            ...obj,
          },
        ]
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        filterStatus,
        orderRemark,
        print,
        summary,
        stepNum,
      }
    },
  })
</script>

<style lang="less" scoped>
  .arco-col {
    display: flex;
  }

  .label-text {
    color: #aaaaaa;
    width: 80px;
    text-align: right;
    // font-size: ;
  }

  .label-value {
    max-width: 180px;
  }

  .flag {
    padding: 2px 10px;
    border: 1px solid red;
    border-radius: 8px;
    color: red;
    transform: scale(0.7);
    margin-top: -2px;
  }

  .title {
    position: relative;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    font-weight: 700;
    &::after {
      position: absolute;
      left: 0;
      top: 5px;
      display: inline-block;
      content: '';
      width: 4px;
      height: 20px;
      border-radius: 2px;
      background-color: #165dff;
    }
  }
</style>

<style>
  .arco-timeline-item-horizontal-top {
    padding-top: 0 !important;
  }
  .arco-timeline-item-horizontal-top > .arco-timeline-item-content-wrapper {
    margin-top: 6px;
  }
</style>
